<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useMainStore } from '@/store/main'
import { getFldm } from '@/utils/get-fldm'
import axios from '@/request/http'
import { Search } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash'
import detailItem from './components/detail-item.vue'

const store = useMainStore()

// 入参

// 生命周期
onMounted(() => {
  // 获取分类代码
  getWjlx()
})

/*
 * 获取标签（分类代码）
 */
const wjlxList = ref<any>([])
const getWjlx = async () => {
  wjlxList.value = await getFldm('gd001')
}

const activeName = ref('first')

/* 展示详情 */
const currentItem = ref<any>({})

const loadDetail = (item: any) => {
  currentItem.value = { ...item }
}

/* 关闭详情 */
const closeDetail = () => {
  currentItem.value = {}
}
// 缓存一下所有的操作
const cacheList = ref<any>([])
const wjxqxxList = ref<any>([])
const getWjxqxx = (data: any) => {
  wjxqxxList.value = data
  // 缓存
  cacheList.value = [cloneDeep(data)]
}

// 复选框绑定数据
const checkboxData = ref([])
// const queryWjbhForm = ref([])
const checkChange = (data: any) => {
  checkboxData.value = data
}

// 预览
defineExpose({ getWjxqxx })
</script>
<template>
  <div class="container">
    <el-tabs v-model="activeName" class="demo-tabs" type="card">
      <el-tab-pane label="副卷" name="first">
        <div class="content">
          <!-- 头部 -->
          <div class="top">
            <div class="topLeft">
              <img src="@/assets/images/yjqqs.png" alt="" />
              <p>{{ store.$state.nodeTreeData?.mc }}</p>
            </div>
            <div class="topRight">
              <el-input placeholder="请输入查询关键字" :suffix-icon="Search" />
            </div>
          </div>
          <!-- 内容区域 -->
          <div class="center">
            <div class="writingsBox">
              <div class="writingsItem" v-for="item in wjxqxxList" :key="item.wjbh">
                <div class="item-content">
                  <div class="content-header">
                    <el-checkbox-group v-model="checkboxData" @change="checkChange">
                      <el-checkbox :value="item"></el-checkbox>
                    </el-checkbox-group>
                    <img src="@/assets/images/ellipse.png" alt="" />
                  </div>
                  <div class="content-img">
                    <img
                      :src="axios.defaults.baseURL + '/fpi/wjfw/download?wjbh=' + item.jpgwjxh"
                      @click.stop="loadDetail(item)"
                    />
                  </div>
                  <div class="content-footer" v-if="item.jcztmc">{{ item.jcztmc }}</div>
                </div>
                <div class="pageNumber">{{ item.wjsxh }}</div>
              </div>
            </div>
          </div>
          <!-- 展示详情 -->
          <detail-item
            :current-item="currentItem"
            class="detail-wrapper"
            @close="closeDetail"
            v-if="currentItem.wjbh"
          ></detail-item>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dae4f1;
      padding-bottom: 5px;
      margin-bottom: 5px;
      .topLeft {
        display: flex;

        img {
          padding-right: 5px;
        }
        p {
          font-weight: 600;
        }
      }
    }
    .buttomGroup {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      .rowbutton {
        display: flex;
      }
    }

    .center {
      padding: 15px;
      background-color: #f7f8f9;
      // flex: 1;
      // flex-shrink: 0;
      height: 650px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      .headerButtomGroup {
        .header-text {
          color: #4a76ab;
        }
        .header-text + .header-text {
          margin-left: 10px;
        }
        .header-avtive {
          color: #fff;
          background-color: #3c89d0;
        }
      }

      .writingsBox {
        overflow-y: auto;
        max-height: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        .writingsItem {
          width: 212px;
          padding: 0 16px 10px 0;
          display: flex;
          flex-direction: column;

          .item-content {
            display: flex;
            flex-direction: column;
            flex: 1;
            flex-shrink: 0;
            background-color: #fff;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            .content-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 10px;
              img {
                width: 15px;
                height: 15px;
              }
            }

            .content-img {
              padding: 0 10px;
              flex: 1;
              flex-shrink: 0;
              background-color: #fff;

              & > img {
                width: 100%;
                height: 212px;
              }
            }

            .content-footer {
              width: 100%;
              text-align: center;
              padding: 5px 0;
              background-color: #f7c863;
            }
          }

          .pageNumber {
            height: 26px;
            line-height: 26px;
            text-align: center;
          }
        }
      }
    }

    .bottomButton {
      margin-top: 10px;
    }
  }
}

.export-excel {
  li {
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background-color: #ecf5ff;
      color: #266df5;
    }
  }
}
.detail-wrapper {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
</style>
